<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code MCP 服务器完整指南 | Ctok</title>
    <meta name="description" content="从零开始学习 Claude Code MCP 服务器的安装、配置和使用，扩展 Claude Code 功能">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            background: #f8fafc;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        .header {
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #2563eb;
            text-decoration: none;
        }
        
        .nav {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        .nav a {
            text-decoration: none;
            color: #64748b;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav a:hover {
            color: #2563eb;
        }
        
        /* Article Layout */
        .article-container {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 40px;
            padding: 40px 0;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* Table of Contents */
        .toc {
            background: #fff;
            border-radius: 12px;
            padding: 30px;
            height: fit-content;
            position: sticky;
            top: 100px;
            border: 1px solid #e2e8f0;
        }
        
        .toc h3 {
            color: #1e293b;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        
        .toc ul {
            list-style: none;
        }
        
        .toc ul ul {
            margin-left: 15px;
            margin-top: 5px;
        }
        
        .toc li {
            margin-bottom: 8px;
        }
        
        .toc a {
            color: #64748b;
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s;
        }
        
        .toc a:hover {
            color: #2563eb;
        }
        
        /* Main Content */
        .main-content {
            background: #fff;
            border-radius: 12px;
            padding: 40px;
            border: 1px solid #e2e8f0;
        }
        
        .article-header {
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 2px solid #e2e8f0;
        }
        
        .article-header h1 {
            font-size: 2.5rem;
            color: #1e293b;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .article-meta {
            color: #64748b;
            font-size: 1rem;
        }
        
        .content h2 {
            color: #1e293b;
            font-size: 1.8rem;
            margin: 40px 0 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .content h3 {
            color: #374151;
            font-size: 1.4rem;
            margin: 30px 0 15px;
        }
        
        .content h4 {
            color: #4b5563;
            font-size: 1.2rem;
            margin: 25px 0 10px;
        }
        
        .content p {
            margin-bottom: 20px;
            line-height: 1.7;
            color: #374151;
        }
        
        .content ul, .content ol {
            margin: 20px 0;
            padding-left: 30px;
        }
        
        .content li {
            margin-bottom: 8px;
            line-height: 1.6;
        }
        
        .content code {
            background: #f1f5f9;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 0.9em;
            color: #e11d48;
        }
        
        .content pre {
            background: #1e293b;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 20px 0;
        }
        
        .content pre code {
            background: none;
            padding: 0;
            color: inherit;
        }
        
        .highlight-box {
            background: #dbeafe;
            border-left: 4px solid #2563eb;
            padding: 20px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .warning-box {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 20px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .success-box {
            background: #dcfce7;
            border-left: 4px solid #16a34a;
            padding: 20px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .step-number {
            background: #2563eb;
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-right: 10px;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .article-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .toc {
                position: static;
                order: -1;
            }
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 20px;
            }
            
            .nav {
                gap: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .main-content {
                padding: 25px;
            }
            
            .article-header h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <a href="index.html" class="logo">Ctok</a>
                <nav>
                    <ul class="nav">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="claude-code-complete-guide.html">使用指南</a></li>
                        <li><a href="claude-code-carpool.html">拼车服务</a></li>
                        <li><a href="en/">English</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="article-container">
            <aside class="toc">
                <h3>目录</h3>
                <ul>
                    <li><a href="#what-is-mcp">什么是 MCP？</a></li>
                    <li><a href="#prerequisites">前提条件</a></li>
                    <li><a href="#installation">安装 MCP 服务器</a>
                        <ul>
                            <li><a href="#filesystem-server">文件系统服务器</a></li>
                            <li><a href="#git-server">Git 服务器</a></li>
                            <li><a href="#database-server">数据库服务器</a></li>
                        </ul>
                    </li>
                    <li><a href="#configuration">配置 MCP</a></li>
                    <li><a href="#usage">使用方法</a></li>
                    <li><a href="#custom-server">自定义服务器</a></li>
                    <li><a href="#troubleshooting">问题排查</a></li>
                </ul>
            </aside>

            <main class="main-content">
                <div class="article-header">
                    <h1>Claude Code MCP 服务器完整指南</h1>
                    <div class="article-meta">
                        最后更新：2024年1月 | 阅读时间：约45分钟
                    </div>
                </div>

                <div class="content">
                    <div class="highlight-box">
                        <p><strong>🎯 学习目标：</strong> 通过本教程，你将学会如何安装、配置和使用 Claude Code MCP 服务器，扩展 Claude Code 的功能，提升开发效率。</p>
                    </div>

                    <h2 id="what-is-mcp">什么是 MCP？</h2>
                    
                    <p>Model Context Protocol (MCP) 是 Claude Code 的扩展协议，允许 Claude Code 与外部工具和服务进行集成。通过 MCP 服务器，Claude Code 可以：</p>
                    
                    <ul>
                        <li>访问文件系统和数据库</li>
                        <li>与 Git 等版本控制系统交互</li>
                        <li>调用外部 API 和服务</li>
                        <li>扩展 Claude Code 的功能边界</li>
                    </ul>
                    
                    <div class="highlight-box">
                        <p><strong>💡 核心概念：</strong> MCP 服务器就像是 Claude Code 的"插件系统"，让 AI 助手能够访问更多的工具和资源，从而提供更强大的帮助。</p>
                    </div>

                    <h2 id="prerequisites">前提条件</h2>
                    
                    <p>在开始安装 MCP 服务器之前，请确保你的环境满足以下要求：</p>
                    
                    <ul>
                        <li>已安装 Claude Code CLI</li>
                        <li>Node.js 16.0.0 或更高版本</li>
                        <li>Python 3.8 或更高版本（某些服务器需要）</li>
                        <li>具有管理员权限（用于安装全局包）</li>
                    </ul>
                    
                    <p>验证环境：</p>
                    <pre><code>claude-code --version
node --version
python --version</code></pre>

                    <h2 id="installation">安装 MCP 服务器</h2>
                    
                    <p>Claude Code 提供了多种预构建的 MCP 服务器，我们来逐一安装和配置。</p>

                    <h3 id="filesystem-server">文件系统服务器</h3>
                    
                    <p>文件系统服务器允许 Claude Code 读写本地文件，是最常用的 MCP 服务器之一。</p>
                    
                    <p><span class="step-number">1</span>安装文件系统服务器：</p>
                    <pre><code>npm install -g @anthropic/mcp-server-filesystem</code></pre>
                    
                    <p><span class="step-number">2</span>验证安装：</p>
                    <pre><code>mcp-server-filesystem --version</code></pre>
                    
                    <div class="success-box">
                        <p><strong>✅ 安装成功：</strong> 如果看到版本信息，说明文件系统服务器已成功安装。</p>
                    </div>

                    <h3 id="git-server">Git 服务器</h3>
                    
                    <p>Git 服务器允许 Claude Code 执行 Git 操作，如提交、推送、分支管理等。</p>
                    
                    <p><span class="step-number">1</span>安装 Git 服务器：</p>
                    <pre><code>npm install -g @anthropic/mcp-server-git</code></pre>
                    
                    <p><span class="step-number">2</span>确保本地已安装 Git：</p>
                    <pre><code>git --version</code></pre>

                    <h3 id="database-server">数据库服务器</h3>
                    
                    <p>数据库服务器支持与 SQLite、PostgreSQL、MySQL 等数据库交互。</p>
                    
                    <p><span class="step-number">1</span>安装数据库服务器：</p>
                    <pre><code>pip install mcp-server-sqlite</code></pre>
                    
                    <div class="warning-box">
                        <p><strong>⚠️ 注意：</strong> 数据库服务器需要 Python 环境。确保你已安装 Python 3.8+ 和 pip。</p>
                    </div>

                    <h2 id="configuration">配置 MCP</h2>
                    
                    <p>安装完服务器后，需要在 Claude Code 配置文件中启用它们。</p>
                    
                    <h3>创建配置文件</h3>
                    
                    <p>在项目根目录创建 <code>claude-config.json</code> 文件：</p>
                    <pre><code>{
  "mcp": {
    "servers": {
      "filesystem": {
        "command": "mcp-server-filesystem",
        "args": ["/path/to/your/project"],
        "env": {
          "SAFE_MODE": "true"
        }
      },
      "git": {
        "command": "mcp-server-git",
        "args": ["/path/to/your/repository"]
      },
      "database": {
        "command": "python",
        "args": ["-m", "mcp_server_sqlite", "/path/to/database.db"]
      }
    }
  }
}</code></pre>
                    
                    <h3>配置说明</h3>
                    
                    <h4>文件系统服务器配置</h4>
                    <ul>
                        <li><code>command</code>: 服务器可执行文件名</li>
                        <li><code>args</code>: 要访问的目录路径</li>
                        <li><code>env.SAFE_MODE</code>: 启用安全模式，限制危险操作</li>
                    </ul>
                    
                    <h4>Git 服务器配置</h4>
                    <ul>
                        <li><code>args</code>: Git 仓库根目录路径</li>
                        <li>确保指定的路径是有效的 Git 仓库</li>
                    </ul>
                    
                    <h4>数据库服务器配置</h4>
                    <ul>
                        <li><code>command</code>: Python 解释器路径</li>
                        <li><code>args</code>: 模块名和数据库文件路径</li>
                    </ul>

                    <h3>启动 MCP 服务器</h3>
                    
                    <p>配置完成后，启动 Claude Code 时会自动启动配置的 MCP 服务器：</p>
                    <pre><code>claude-code start</code></pre>
                    
                    <p>验证服务器状态：</p>
                    <pre><code>claude-code mcp status</code></pre>

                    <h2 id="usage">使用方法</h2>
                    
                    <p>配置完成后，你就可以在 Claude Code 中使用扩展功能了。</p>
                    
                    <h3>文件系统操作</h3>
                    
                    <p>现在 Claude Code 可以直接读写文件：</p>
                    <pre><code># 让 Claude Code 读取文件内容
"请阅读 src/main.py 文件并解释其功能"

# 让 Claude Code 创建新文件
"在 src/ 目录下创建一个新的 utils.py 文件，包含常用工具函数"

# 让 Claude Code 修改文件
"修改 package.json 文件，添加新的依赖项 lodash"</code></pre>
                    
                    <h3>Git 操作</h3>
                    
                    <p>Claude Code 现在可以执行 Git 命令：</p>
                    <pre><code># 查看仓库状态
"查看当前 Git 仓库的状态"

# 创建提交
"将所有更改添加到暂存区并创建一个提交，消息为 'Add new feature'"

# 管理分支
"创建一个名为 feature/new-ui 的新分支并切换到该分支"</code></pre>
                    
                    <h3>数据库操作</h3>
                    
                    <p>与数据库交互：</p>
                    <pre><code># 查询数据
"查询 users 表中的所有记录"

# 创建表
"创建一个新表 products，包含 id, name, price 字段"

# 数据分析
"分析 orders 表的销售趋势"</code></pre>

                    <h2 id="custom-server">自定义服务器</h2>
                    
                    <p>除了预构建的服务器，你也可以创建自定义 MCP 服务器。</p>
                    
                    <h3>创建简单的自定义服务器</h3>
                    
                    <p>创建一个新的 Node.js 项目：</p>
                    <pre><code>mkdir my-mcp-server
cd my-mcp-server
npm init -y
npm install @anthropic/mcp-sdk</code></pre>
                    
                    <p>创建服务器代码（<code>server.js</code>）：</p>
                    <pre><code>const { Server } = require('@anthropic/mcp-sdk');

const server = new Server({
  name: 'my-custom-server',
  version: '1.0.0',
});

// 添加工具
server.addTool({
  name: 'get_current_time',
  description: '获取当前时间',
  parameters: {},
  handler: async () => {
    return {
      content: [{
        type: 'text',
        text: `当前时间：${new Date().toLocaleString('zh-CN')}`
      }]
    };
  }
});

// 启动服务器
server.start().catch(console.error);</code></pre>
                    
                    <p>在 Claude Code 配置中添加自定义服务器：</p>
                    <pre><code>{
  "mcp": {
    "servers": {
      "custom": {
        "command": "node",
        "args": ["/path/to/my-mcp-server/server.js"]
      }
    }
  }
}</code></pre>

                    <h2 id="troubleshooting">问题排查</h2>
                    
                    <h3>常见问题及解决方案</h3>
                    
                    <h4>Q: MCP 服务器无法启动</h4>
                    <p><strong>A:</strong> 检查以下几点：</p>
                    <ul>
                        <li>确认服务器已正确安装</li>
                        <li>检查配置文件路径是否正确</li>
                        <li>验证指定的目录或文件是否存在</li>
                    </ul>
                    
                    <pre><code># 检查服务器状态
claude-code mcp status

# 查看详细日志
claude-code mcp logs

# 重启服务器
claude-code mcp restart</code></pre>
                    
                    <h4>Q: 权限被拒绝</h4>
                    <p><strong>A:</strong> 可能是文件系统权限问题：</p>
                    <ul>
                        <li>确保 Claude Code 有访问指定目录的权限</li>
                        <li>对于 Windows，可能需要以管理员身份运行</li>
                        <li>检查 SAFE_MODE 设置是否过于严格</li>
                    </ul>
                    
                    <h4>Q: Git 操作失败</h4>
                    <p><strong>A:</strong> Git 服务器问题排查：</p>
                    <ul>
                        <li>确认指定路径是有效的 Git 仓库</li>
                        <li>检查 Git 配置（用户名、邮箱等）</li>
                        <li>验证对仓库的读写权限</li>
                    </ul>
                    
                    <h3>调试模式</h3>
                    
                    <p>启用调试模式获取更多信息：</p>
                    <pre><code>export DEBUG=mcp:*
claude-code start</code></pre>
                    
                    <h3>配置验证</h3>
                    
                    <p>验证配置文件是否正确：</p>
                    <pre><code>claude-code mcp validate</code></pre>

                    <div class="highlight-box">
                        <p><strong>🎉 恭喜！</strong> 你已经掌握了 Claude Code MCP 服务器的完整使用方法。现在你可以充分利用 MCP 的强大功能，让 Claude Code 成为更加强大的编程助手。</p>
                    </div>
                    
                    <div class="success-box">
                        <p><strong>📚 下一步：</strong> 建议你继续学习 <a href="claude-code-complete-guide.html">完整使用指南</a>，进一步提升使用效率。</p>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>
</html>